<!--通用选择列表页面，使用方法-->
<!--父组件声明该组件，并使用变量控制显示隐藏，然后实现接收数据方法即可-->
<!--Url：请求路径，listShow：显示字段行数组(key、prefix、secondkey、secondprefix)-->
<!--<selectListPage  v-if="showSelectPage" v-on:update-flag="showSelectPage=false" v-on:select-item="handleSelectItem"-->
<!--     :pageTitle="'选择合作伙伴'" :url="'partnerBasic$api$findAll'"-->
<!--     :body-param="{}" :query-param="{}"-->
<!--     :listShow="[{ 'key':'partnerName'},{ 'key':'partnerCode', 'prefix':'合作伙伴编码'}]">-->
<!--</selectListPage>-->
<template>
  <div class="select-list-page" >
    <van-popup v-model="isShow" position="bottom" :style="{ height: '100%',width: '100%' }">
      <div class="titlebar bg-theme color-f text-l" >
        <i class="iconfont icon-fanhui font19 pl08 iback" @click="goBack"></i>
        <!-- 详情进入 -->
        <span class="font19 ml16 ">{{ pageTitle }} </span>
      </div>
        <van-pull-refresh v-model="tabRefreshing" @refresh="tableViewRefresh">
            <van-list v-model="tableViewLoading" :finished="tableViewFinished" :finished-text='requestNoMoreMessage'
                :error-text="requestErrorMessage" @load='tableViewLoadMore' style="margin-bottom: 50px;">

                <van-cell v-for="(item, index) in tableViewDataList" :key="index" @click="onItemSelected(item)">
                    <div>
                        <div v-for="(line, i) in listShow" :key="'line'+index+i" :class="i==0 ? 'titlefont' : 'infosfont' ">
                        {{ line.prefix ? line.prefix+":" : '' }} {{ item[line.key] }} {{ line.secondkey ? "____" : '' }} {{ line.secondprefix ? line.secondprefix+":" : '' }} {{ line.secondkey ? item[line.secondkey] : '' }}
                        </div>
                    </div>
                </van-cell>

                <!-- 请求第一页数据时，出现错误或无数据 展示空白提示界面
                请求后续数据时，只做弹窗提示 -->
                <div v-show="showEmptyView" class="text-c">
                    <img width="100px" height="100px" :src="require('@/assets/images/pic_nodata.png')" alt="暂无数据"
                        style="margin: 120px 50px 0" @click="tableViewRefresh()" />
                </div>

                <div v-show="showErrorView" class="text-c">
                    <img width="100px" height="100px" :src="require('@/assets/images/pic_neterror.png')" alt="获取数据失败"
                        style="margin: 120px 50px 0" @click="tableViewRefresh()" />
                    <div class="color-b font14" style="margin: 20px 0 0 15px">
                        {{ requestErrorMessage }}
                    </div>
                </div>

            </van-list>
        </van-pull-refresh>
    </van-popup>
    </div>
</template>

<script>

import { getSrqrRequest } from "@/api/dictapi";
import jTool from "@/assets/js/jHelper";
import util from '@/assets/js/public';
import { Toast } from "vant";
import { Notify } from "vant";
import { mapGetters } from "vuex";
export default {
    props:{
        pageTitle:{
          type:String,
          default:'选择列表',
        },
        url:{
          type:String,
          required: true
        },
        bodyParam :{
          type: Object,
          default: () => {}
        },
        queryParam :{
          type: Object,
          default: () => {}
        },
        listShow :{
          type: Array,
          default: () => []
        }
     },
    data() {
        return {
            isShow: true,
            currentPage: 1,
            appDecision: {
                page: 1, rows: 20, size: 20,
            },
            kv:{},
            requestNoMoreMessage: '',
            requestErrorMessage: '',

            tableViewDataList: [],
            tabRefreshing: false,
            tableViewLoading: false,
            tableViewFinished: false,
        }
    },

    computed: {
        ...mapGetters(["user"]),
        ...mapGetters(["userinfo"]),

        showEmptyView () {
            return this.appDecision.page === 1 && this.tableViewDataList.length === 0 && jTool.stringIsEmpty(this.requestErrorMessage);
        },

        showErrorView() {
            return this.appDecision.page === 1 && !jTool.stringIsEmpty(this.requestErrorMessage);
        }

    },
    created() {
      this.kv={
              'currentUserCode': util.encrypt(this.user.userName),
              'source': 'MOBILE'
            }
      this.tableViewDataList=[]
      this.tableViewRefresh();
    },

    methods: {
        goBack(){
          this.isShow=false;
          this.$emit('update-flag',false)
        },
        onItemSelected(value) {
          this.isShow=false;
          this.$emit('select-item', value)
        },

        tableViewRefresh() {
            this.appDecision.page = 1;
            this.tabRefreshing = true;
            this.tableViewLoading = true;
            this.tableViewFinished = false;
            this.requestListDatas();
        },

        tableViewLoadMore() {
            if (!jTool.stringIsEmpty(this.requestNoMoreMessage)) {
                this.tableViewLoading = false
                this.tableViewFinished = true;
            }
            else {
                this.tabRefreshing = false;
                this.requestListDatas();
            }
        },

        requestListDatas() {
            if (this.appDecision.page == 1) {
                Toast.loading({
                    message:'加载中',
                    forbidClick:false
                });
            }
            getSrqrRequest(this.url, {
                    kv: {...this.kv, ...this.appDecision,...this.queryParam},
                    body: {...this.appDecision, ...this.bodyParam}
                }
              )
                .then((result) => {
                    Toast.clear();
                    if(result.responseid==1){//请求成功
                        let listdetails = [];
                        if (result.data.data.content) {
                            listdetails = listdetails.concat(result.data.data.content);
                        }

                        if (this.appDecision.page == 1) {
                            this.tableViewDataList = listdetails;
                        }else{
                            this.tableViewDataList = this.tableViewDataList.concat(listdetails);
                        }

                        if (result.data.data.totalPages <= this.appDecision.page) {
                            this.requestNoMoreMessage = '没有更多数据！';
                            this.tableViewFinished = true;
                        } else {
                            this.appDecision.page++;
                            this.requestNoMoreMessage = '';
                        }
                        this.requestCompletion('');
                    }else{
                        this.tableViewFinished = true;
                        this.requestCompletion('result.message');
                    }
                })  .catch((error) => {
                    Toast.clear();
                    this.tableViewFinished = true;
                    this.requestCompletion('获取数据失败,请稍后重试');
                });
        },


        requestCompletion(error) {
            this.tabRefreshing = false;
            this.tableViewLoading = false

            if (!jTool.stringIsEmpty(error)) {
                this.requestErrorMessage = error;
                Notify({ type: 'warning', message: error })
            }
        }
    }
}
</script>

<style scoped>
.titlebar {
  width: 100%;
  height: 50px;
  -webkit-box-align: center;
  -webkit-box-pack: justify;
  display: flex;
  align-items: center;
}

.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
}
</style>